<template>
    <div class="messagebox">
        <a-tabs default-active-key="1" @change="callback">
            <a-tab-pane key="1" tab="待办(4)">
                <!-- 列表组件 -->
                <a-list item-layout="horizontal" :data-source="todomessage">
                    <a-list-item slot="renderItem" slot-scope="item, index" :key="index">
                        <!-- 后期需更改内容  description-->
                        <a-list-item-meta :description="item.text">
                            <!-- 需更换链接 -->
                            <a slot="title">{{ item.title }}</a>

                        </a-list-item-meta>
                    </a-list-item>
                </a-list>
            </a-tab-pane>
            <a-tab-pane key="2" tab="通知(4)" force-render>
                <!-- 列表组件 -->
                <a-list item-layout="horizontal" :data-source="noticemessage">
                    <a-list-item slot="renderItem" slot-scope="item, index" :key="index">
                        <!-- 后期需更改内容  description-->
                        <a-list-item-meta description="上午 10:23">
                            <a slot="title">{{ item.title }}</a>
                            <a-avatar slot="avatar"
                                src="https://cdn3.axureshop.com/demo/2033334/images/%E6%BC%94%E7%A4%BA%E6%A1%86%E6%9E%B6/u3474.svg">
                            </a-avatar>
                        </a-list-item-meta>
                    </a-list-item>
                </a-list>
            </a-tab-pane>

        </a-tabs>
        <div class="btnbox">
            <button @click="EmptyMessage">清空消息</button>
            <button @click="ToView">查看更多</button>
        </div>
    </div>
</template>

<script>
const todomessage = [
    {
        title: '报修工单提醒',
        text: "您有一条新的报修工单需要处理 报修标题：下水道堵塞"
    },
    {
        title: '报修工单提醒',
        text: "您有一条新的报修工单需要处理 报修标题：下水道堵塞"
    },
    {
        title: '报修工单提醒',
        text: "您有一条新的报修工单需要处理 报修标题：下水道堵塞"
    },
    {
        title: '报修工单提醒',
        text: "您有一条新的报修工单需要处理 报修标题：下水道堵塞"
    },
];
const noticemessage = [
    {
        title: '系统更新通知',
    },
    {
        title: '系统更新通知',
    },
    {
        title: '系统更新通知',
    },
    {
        title: '系统更新通知',
    },]
export default {
    name: 'HeaderChildmessage',

    data() {
        return {
            todo: 4,
            notice: 4,
            todomessage,
            noticemessage

        };
    },

    mounted() {

    },

    methods: {
        callback(key) {
            console.log(key);
        },
        EmptyMessage() {
            // 清空消息
        },
        ToView() {
            this.$router.push("/messagenotification")
            // 查看更多跳转页面

        }
    },
};
</script>

<style lang="less" scoped>
.messagebox {
    width: 326px;





    /deep/.ant-tabs-nav-scroll {
        display: flex;
        justify-content: space-evenly;



    }

    /deep/.ant-tabs-nav .ant-tabs-tab {
        margin-right: 80px;
    }

    /deep/.ant-tabs-nav .ant-tabs-tab:last-child {
        margin-right: 0px;
    }

    .btnbox {
        width: 100%;
        border-top: 1px solid #ccc;
        // padding: 10px 0 0 0;
        display: flex;

        button {
            padding-top: 10px;
            width: 50%;
            background-color: transparent;
            border-right: 1px solid #ccc;
            cursor: pointer;
        }

        button:last-child {
            border: none;

        }

    }
}
</style>